<template>
	<view class="page" v-if="id">
		<view class="step ">
			<u-steps active-color="#00C08D" mode="image" :list="numList" :current="current"></u-steps>
		</view>


		<view class="detail">

			<view class="u-flex ">
				<view>
					<u-image :src=" $Url( info.project_info.images.split(',')[0])" width="158" height="128"></u-image>
				</view>

				<view class="u-flex u-row-between u-flex-1">
					<view class="u-margin-left-20">
						<view class="u-font-weight u-font-lg">{{info.project_info.name}}</view>
						<view class="u-margin-top-20 " style="color: #00C08D;">
							￥ {{info.project_info.price}}/
							{{info.project_info.service_duration}}分钟
						</view>
					</view>
					<view>


						<u-button v-if="info.status==7 " size="mini" type="error">
							已拒绝
						</u-button>

						<u-button v-if="info.status==6 " size="mini" type="error">
							已取消
						</u-button>

						<u-button @click="accept(1)" v-if="info.status==0 && isTechnician == 1" size="mini"
							type="success">
							确认接单
						</u-button>


						<u-button class="u-margin-left-20" @click="accept(5)"
							v-if="info.status==4 && isTechnician == 1" size="mini" type="error">
							结束服务
						</u-button>


						<u-button @click="accept(4)" v-if="info.status==1 && isTechnician==0" size="mini"
							type="success">
							技师到场
						</u-button>





					</view>
				</view>

			</view>

			<view class="u-margin-top-20">
				<u-cell-group>
					<u-cell-item title="技师" :arrow="false">
						<view slot="right-icon" class="u-flex">
							<view style="color: #00C08D;margin-right: 20rpx;">{{info.technician_info.nickname}}</view>
							<u-image width="60" height="60" :src=" info.technician_info. avatar"></u-image>
						</view>
					</u-cell-item>
					<u-cell-item :value=" '￥'+ info.fare" title="车费" :value-style="{'color':'#00C08D'}" :arrow="false">
					</u-cell-item>
					<u-cell-item :border-bottom="false" :value="'￥'+ info.need_price" title="实付"
						:value-style="{'color':'#00C08D'}" :arrow="false"></u-cell-item>
				</u-cell-group>
			</view>

		</view>

		<view class="detail u-margin-top-40">
			<u-cell-group :border="false">
				<u-cell-item :value="info .trade_no" title="订单编号" :arrow="false"></u-cell-item>
				<u-cell-item :value="info.contact_name" title="姓名" :arrow="false"></u-cell-item>
				<u-cell-item :arrow="false" @click="call(info.contact_phone)" :value="info.contact_phone" title="手机号" >

					<u-icon name="phone" slot="right-icon" class="u-margin-left-20"></u-icon>
				</u-cell-item>
				<u-cell-item :value="$u.timeFormat(info.paytime, 'yyyy-mm-dd hh:MM:ss')" title="下单时间" :arrow="false" v-if="info.paytime"></u-cell-item>
				<u-cell-item :value="info.appointment_start_time" title="预约时间" :arrow="false" v-if="info.appointment_start_time"></u-cell-item>
				<u-cell-item :value="info.start_time" title="开始时间" :arrow="false" v-if="info.start_time"></u-cell-item>
				<u-cell-item :value="info.end_time" title="结束时间" :arrow="false" v-if="info.end_time"></u-cell-item>
				
				<u-cell-item :border-bottom="false" :value="info.address" title="服务地址" :arrow="false"
					v-if="info.address"></u-cell-item>
					
					
					<u-cell-item :border-bottom="false" :value="info.remarks" title="备注" :arrow="false"
						v-if="info.remarks"></u-cell-item>
					
					
			</u-cell-group>

		</view>

	</view>
</template>

<script>
	// 状态:0=待接单,1=已接单,2=待服务,3=已到达,4=进行中,5=已完成,6=已取消,7=已拒绝
	export default {
		data() {
			return {
				numList: [{
					name: '技师接单',
					icon: '/static/step_1_g.png',
					sicon: '/static/step_1_s.png'
				}, {
					name: '技师到达',
					icon: '/static/step_2_g.png',
					sicon: '/static/step_2_s.png'
				}, {
					name: '开始服务',
					icon: '/static/step_3_g.png',
					sicon: '/static/step_3_s.png'
				}, {
					name: '服务完成',
					icon: '/static/step_4_g.png',
					sicon: '/static/step_4_s.png'
				}, ],
				current: 0,
				id: "",
				info: {

				},
				// 0用户  1技师
				isTechnician: 0
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			if (options.isTechnician) {
				this.isTechnician = options.isTechnician
			}
			this.jiazai()

		},
		methods: {
			// 技师接单
			accept(e) {
				this.$u.post('/order/setOrderStatus', {
					trade_no: this.id,
					status: e
				}).then(res => {
					this.$u.toast("成功");
					this.jiazai()
				}).catch(err => {})

			},
			call(e){
				uni.makePhoneCall({
					phoneNumber:e
				})
			},
			jiazai() {
				this.$u.post('/user/getOrderDetails', {
					trade_no: this.id
				}).then(res => {
					let status = res.status;

					if (status == 0 || status == 1 && this.isTechnician == 1) {
						this.current = 0;
					}
					if (status == 3 && this.isTechnician == 0) {
						this.current = 1;
					}
					if (status == 4) {
						this.current = 2;
					}
					if (status == 5) {
						this.current = 3;
					}
					this.info = res;
				}).catch(err => {})
			},

		}
	}
</script>

<style>
	.page {
		background: #F1F1F1;
		min-height: 100vh;
		display: inline-block;
		width: 750rpx;
	}

	.step {
		width: 700rpx;
		margin: 40rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx 20rpx;
	}

	.detail {
		width: 700rpx;
		border-radius: 20rpx;
		margin: auto;
		background: #fff;
		padding: 20rpx;
	}
</style>
